<template>
  <div>
    <div class="items-wrapper">
      <van-cell-group>
        <van-cell title="可提现金额" :value="userInfo.balance" isLink>
        <span class="van-cell__value--enhance">￥{{ userInfo.balance }}</span>
        </van-cell>
        <van-field v-model="amount" placeholder="输入提现金额"></van-field>
        <van-field v-model="alipay" placeholder="输入您的支付宝账号"></van-field>
        <van-field v-model="name" placeholder="输入您支付宝对应的真实姓名"></van-field>
      </van-cell-group>
    </div>
    <div class="button-wrapper">
      <button catalog="button" @click="submit" class="btn btn-yellow">提交申请</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import { mapGetters } from 'vuex'

export default {
  name: 'WithdrawApply',
  data () {
    return {
      alipay: '',
      amount: '',
      name: ''
    }
  },
  created () {
    this.init()
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    init() {
      console.log(this.userInfo.balance)
    },
    submit: function() {
      var amount = parseFloat(this.amount)
      if (isNaN(amount)) {
        return this.$toast.fail('请输入正确的提现金额')
      }
      console.log(amount)
      if (amount <= 0) {
        return this.$toast.fail('提现金额错误')
      }
      console.log(this.userInfo.balance)
      if (amount > this.userInfo.balance) {
        return this.$toast.fail('提现金额不能超过余额')
      }
      if (!this.alipay) {
        return this.$toast.fail('请输入您的支付宝账号')
      }
      if (!this.name) {
        return this.$toast.fail('请输入您的支付宝对应的姓名')
      }
      
      var params = {
        'name': this.name,
        'amount': amount,
        'alipay': this.alipay,
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.post('/finances/withdraw/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status >= 200 && res.status < 300) {
          /*
          var payload = { amount: amount }
          that.$store.dispatch('withdraw', payload)
          */
          that.$toast.success('申请提现成功，请等待审核')
          that.$router.go(-1)
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        that.$toast.fail('请求出错')
      })
    }
  }
}

</script>
